
<template>
  <div class="main">
    <div class="main-header">
      <!-- 左边轮播图 -->
      <div class="main-header-left">
        <el-carousel type="card" height="200px">
          <el-carousel-item>
            <a href="#">
              <img src="../../assets/lh/imgs/jianlai.jpg" alt />
            </a>
          </el-carousel-item>
          <el-carousel-item>
            <a href="#">
              <img src="../../assets/lh/imgs/taigujianzun.jpg" alt />
            </a>
          </el-carousel-item>
          <el-carousel-item>
            <a href="#">
              <img src="../../assets/lh/imgs/yuanzun.gif" alt />
            </a>
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 右边热门小说搜索 -->
      <div class="main-header-right">
        <h4>热门搜索小说</h4>
        <hr class="hr1" />
        <ul>
          <li
            v-for="(item,index) in woManBook1"
            :key="index"
            @click="resive(item._id)"
          >{{item.title}}</li>
        </ul>
      </div>
    </div>

    <!-- 追书最热榜 -->
    <div class="main-center">
      <div class="main-center-top">
        <h3 class="h3">追书最热榜</h3>
        <p class="more" @click="cjsJump('/4/all?id=54d42d92321052167dfb75e3')">
          更多
          <i class="el-icon-d-arrow-right"></i>
        </p>
      </div>
      <div class="main-center-center">
        <div class="main-center-center-main3" v-for="(item,index) in bookList" :key="index">
          <img :src="imgUrl+item.cover" alt class="img2" @click="resive(item._id)" />
          <div class="main-center-center-main4">
            <p class="p4" @click="resive(item._id)">{{item.title}}</p>
            <p class="p5">{{item.shortIntro}}</p>
            <p class="p6">
              <span>{{item.author}}</span>
              <span></span>
              <span>{{item.latelyFollower+"朵花"}}</span>
            </p>
          </div>
        </div>
      </div>
      <!-- vip排行榜 -->
      <div class="main-center-top">
        <h3 class="h3">VIP推荐</h3>
        <p class="more" @click="cjsJump('/4/all?id=54d42d92321052167dfb75e3')">
          更多
          <i class="el-icon-d-arrow-right"></i>
        </p>
      </div>
      <div class="main-center-center1">
        <div class="main-center-center1-top">
          <div class="main-center-center1-top-left">
            <el-carousel
              :interval="5000"
              type="card"
              height="200px"
              class="el-carous"
              indicator-position="none"
            >
              <el-carousel-item v-for="(item,index) in vipList" :key="index" class="el-car">
                <a href="javascript:;">
                  <img :src="imgUrl+item.cover" alt class="el-img" @click="resive(item._id)" />
                </a>
              </el-carousel-item>
            </el-carousel>
          </div>

          <div class="main-center-center1-top-right">
            <el-carousel :interval="5000" arrow="never" class="el-carr" indicator-position="none">
              <el-carousel-item v-for="(item, index ) in vipList" :key="index">
                <div class="el-carr-body">
                  <p class="VIPtitle">{{ item.title }}</p>
                  <p class="VIPcontant">{{item.shortIntro}}</p>
                  <!-- <el-button type="danger" round @click="resive(item._id)" class="btn-danger">书籍详情</el-button> -->
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="fudong"></div>
        </div>

        <div class="main-center-center-main3" v-for="(item,index) in vipList1" :key="index">
          <img :src="imgUrl+item.cover" alt class="img2" @click="resive(item._id)" />
          <div class="main-center-center-main4">
            <p class="p4" @click="resive(item._id)">{{item.title}}</p>
            <p class="p5">{{item.shortIntro}}</p>
            <p class="p6">
              <span>{{item.author}}</span>
              <span></span>
              <span>{{item.latelyFollower+"朵花"}}</span>
            </p>
          </div>
        </div>
      </div>
      <!-- 男生精选 -->
      <div class="main-center-top">
        <h3 class="h3">男生精选</h3>
        <p class="more" @click="cjsJump('/4/all?id=54d42d92321052167dfb75e3')">
          更多
          <i class="el-icon-d-arrow-right"></i>
        </p>
      </div>
      <div class="main-center-center">
        <div class="main-center-center-main3" v-for="(item,index) in vipList2" :key="index">
          <img :src="imgUrl+item.cover" alt class="img2" @click="resive(item._id)" />
          <div class="main-center-center-main4">
            <p class="p4" @click="resive(item._id)">{{item.title}}</p>
            <p class="p5">{{item.shortIntro}}</p>
            <p class="p6">
              <span>{{item.author}}</span>
              <span></span>
              <span>{{item.latelyFollower+"朵花"}}</span>
            </p>
          </div>
        </div>
      </div>
      <!-- 女生精选 -->
      <div class="main-center-top">
        <h3 class="h3">女生精选</h3>
        <p class="more" @click="cjsJump('/4/all?id=54d42d92321052167dfb75e3')">
          更多
          <i class="el-icon-d-arrow-right"></i>
        </p>
      </div>

      <div class="main-center-center">
        <div class="main-center-center-main3" v-for="(item,index) in woManBook" :key="index">
          <img :src="imgUrl+item.cover" alt class="img2" @click="resive(item._id)" />
          <div class="main-center-center-main4">
            <p class="p4" @click="resive(item._id)">{{item.title}}</p>
            <p class="p5">{{item.shortIntro}}</p>
            <p class="p6">
              <span>{{item.author}}</span>
              <span></span>
              <span>{{item.latelyFollower+"朵花"}}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getBook, getRankId, getWomanBook, getDetails } from "@/api/lh";
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      Rank: {
        monthRank: ""
      },
      bookList: [],
      vipList: [],
      vipList1: [],
      vipList2: [],
      woManBook: [],
      woManBook1: [],

      imgUrl: "http://statics.zhuishushenqi.com"
    };
  },

  created() {
    getRankId()
      .then(res => {
        console.log(res.data.male[0].monthRank);
        this.updateTable(res.data.male[0].monthRank);
        this.updata(res.data.female[0].monthRank);
      })
      .catch(err => {
        alert("网络请求错误");
      });
  },
  methods: {
    updateTable(params) {
      getBook(params)
        .then(res => {
          console.log(res);
          console.log(res.data.ok);
          if (res.data.ok) {
            console.log(res.data.ranking.books);

            this.bookList = res.data.ranking.books.slice(0, 6);

            this.vipList = res.data.ranking.books.slice(6, 12);

            this.vipList1 = res.data.ranking.books.slice(12, 15);

            this.vipList2 = res.data.ranking.books.slice(15, 21);
          }
        })
        .catch(err => {
          alert("网络请求错误");
        });
    },
    updata(params) {
      getWomanBook(params)
        .then(res => {
          console.log(res);
          if (res.data.ok) {
            this.woManBook = res.data.ranking.books.slice(0, 6);
            this.woManBook1 = res.data.ranking.books.slice(6, 11);
          }
        })
        .catch(err => {
          alert("网络请求错误");
        });
    },
    resive(_id) {
      localStorage.setItem("_id", _id);
      this.$router.push("/bookdetails");
    },
    cjsJump(url) {
      this.$router.push(url);
    }
  }
};
</script>
 <style scoped>
.fudong {
  width: 900px;
  height: 350px;
  position: absolute;
  z-index: 10;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #fff;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #fff;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: white;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: white;
}
.el-carr {
  width: 500px;
}
img {
  width: 300px;
  height: 200px;
}
.main-header {
  overflow: hidden;
  width: 900px;
}
.main-header-left {
  float: left;
  width: 600px;
}
.main-header-right {
  float: left;
  width: 200px;
  margin-left: 20px;
  margin-top: 20px;
}
ul {
  overflow: hidden;
}
.hr1 {
  width: 300px;
}
li {
  margin-top: 10px;
  color: hotpink;
  width: 200px;
  cursor: pointer;
}

.main-center {
  margin-top: 30px;
  overflow: hidden;
  width: 1000px;
}
.main-center-top {
  border-top: 5px solid pink;
  height: 50px;
  margin-top: 10px;
  width: 900px;
}
.h3 {
  width: 100px;
  float: left;
  border-bottom: 5px solid pink;
}
.more {
  float: right;
  cursor: pointer;
}
.main-center-center {
  height: 340px;
}

.main-center-center-main2 {
  width: 280px;
  margin-right: 20px;
  float: right;
}
.main-center-center1-top {
  overflow: hidden;
  position: relative;
}
.main-center-center1-top-left {
  float: left;
}
.main-center-center1-top-right {
  float: left;
  background: white !important;
}
.el-carous {
  width: 400px;
  height: 300px;
}
.el-car {
  width: 200px;
  height: 220px;
}
.el-img {
  display: block;
  width: 200px;
  height: 220px;
}
.el-carr-body {
  margin-left: 20px;
}
.el-carr-body p:nth-of-type(1) {
  font-size: 20px;
  font-weight: 600;
}
.el-carr-body p:nth-of-type(2) {
  margin: 10px 0;
  font-size: 14px;
  text-indent: 32px;
  width: 450px;
}
.btn-danger {
  margin-top: 20px;
}

.main-center-center1 {
  height: 450px;
}
.main-center-center-main3 {
  overflow: hidden;
  width: 290px;
  height: 160px;
  float: left;
  margin-right: 10px;
}
.main-center-center-main4 {
  width: 180px;
  margin-right: 10px;
  float: right;
}
.main-center-center-main3 .img2 {
  display: block;
  width: 80px;
  height: 100px;
  float: left;
  cursor: pointer;
}
.main-center-center-main3 .p4 {
  cursor: pointer;
  font-weight: 600;
  font-size: 20px;
}
.main-center-center-main3 .p5 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: hotpink;
  font-size: 12px;
  width: 180px;
  line-height: 50px;
}
.main-center-center-main3 .p6 {
  font-size: 12px;
  width: 180px;
}
.main-center-center-main3 .p6 span:nth-of-type(2) {
  border-right: 2px solid pink;
  margin: 0 10px;
}
.main-center-center-main3 .p6 span:nth-of-type(3) {
  color: lightcoral;
}
.VIPcontant {
  font-size: 14px !important;
  line-height: 24px;
  margin-top: 30px !important;
}
.VIPtitle {
  padding-left: 150px;
}
</style>
